<template>
  <basic-container>
    <h3>菜单管理</h3>
    <avue-crud
      ref="crud"
      :option="option"
      :data="data"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @on-load="getList"
      @refresh-change="refreshChange"
    >
      <template #menu="{ row, size }">
        <el-button :size="size" text type="primary" @click="handleAdd(row)"
          >新增子级</el-button
        >
      </template>
    </avue-crud>
  </basic-container>
</template>
<script>
import { getMenuChild, update, add, del, getTreeData } from "@/api/menu.js";
export default {
  data() {
    return {
      parentId: undefined,
      option: {
        lazy: true,
        rowKey: "id",
        column: [
          {
            label: "上级id",
            prop: "pid",
            hide: true,
            type: "tree",
            value: 0,
            dicData: [],
          },

          {
            label: "id",
            prop: "id",
            hide: true,
            display: false,
          },
          {
            label: "菜单名称",
            prop: "label",
            align:"center",
          },
          {
            label: "路径",
            prop: "path",
            align:"center",
          },
          {
            label: "组件名称",
            prop: "component",
            align:"center",
          },
          {
            label: "图标",
            prop: "icon",
            type: "icon",
            value: "icon-caidan",
            align:"center",
            iconList: [
              {
                label: "图标列表",
                list: [
                  "",
                  "icon-caidan", 
                  "icon-send",
                  "icon-principal",
                  "icon-zhuti",
                  "icon-yanzhengma",
                  "icon-yonghu",
                  "icon-mima",
                  "icon-shouji",
                  "icon-iconset0265",
                  "icon-dongtai",
                  "icon-canshu",
                  "icon-shujuzhanshi2",
                  "icon-tuichuquanping",
                  "icon-rizhi",
                  "icon-cuowutishitubiao",
                  "icon-iconset0216",
                  "icon-debug",
                  "icon-quanxian",
                  "icon-shuaxin",
                  "icon-quanping",
                  "icon-bofangqi-suoping",
                  "icon-navicon",
                  "icon-yuan",
                  "icon-biaodan",
                  "icon-liuliangyunpingtaitubiao08",
                  "icon-caidanguanli",
                  "icon-yonghuguanli",
                  "icon-jiaoseguanli",
                  "icon-cuowu",
                  "icon-wxbgongju",
                  "icon-tuichu",
                  "icon-daohanglanmoshi02",
                  "icon-changyonglogo27",
                  "icon-huanyingye",
                  "icon-iframe",  
                  "icon-tubiao", 
                  "icon-biaoge",
                ],
              },
            ],
          },
          {
            label: "图标颜色",
            prop: "iconBgColor",
            type: "color",
            hide: true,
            display: false,
          },
          {
            label: "排序",
            prop: "sort",
            align:"center",
            value: 100,
          },
        ],
      },
      data: [],
    };
  },

  methods: {
    refreshChange() {
      this.getList();
    },

    getList() {
      this.loading = true;

      //获取树分类
      getTreeData().then((res) => {
        this.loading = false;
        const data = res.data.data;
        this.data = data;
        const dicData = JSON.parse(JSON.stringify(res.data.data));
        dicData.unshift({ label: "顶级菜单", value: 0, children: [] });
        this.option.column[0].dicData = dicData;
      });
    },
    rowDel(row, index, done) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(row.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });

            this.getList();
            done(row);
          });
        })
        .catch(() => {});
    },
    //新增
    rowSave(row, done) {
      row.parentId = this.parentId;
      this.parentId = undefined;
      if (row.id) {
        update(row).then((res) => {
          done();
          this.getList();
        });
      } else {
        add(row).then((res) => {
          done();
          this.getList();
        });
      }
    },
    //编辑
    rowUpdate(row, index, done) {
      update(row).then((res) => {
        done(row);
        this.getList();
      });
    },
    //子项
    handleAdd(row) {
      this.option.column[0].value = row.id;
      this.$refs.crud.rowAdd();
    },
  },
};
</script>
